import React, { FC, useMemo } from 'react';

import styles from './index.less';

const UserProfile: FC = () => {
  const user = useMemo(() => window['LOGIN_USER_INFO'], []);

  return user ? (
    <div className={styles.userProfile}>
      <svg viewBox="0 0 1024 1024" width="20" height="20" fill="#666">
        <path d="M512 1011.2C243.776 1011.2 25.6 793.024 25.6 524.8S243.776 38.4 512 38.4s486.4 218.176 486.4 486.4-218.176 486.4-486.4 486.4zM512 89.6c-240 0-435.2 195.2-435.2 435.2S272 960 512 960s435.2-195.2 435.2-435.2S752 89.6 512 89.6z"></path>
        <path d="M800.896 903.552h-51.2c0-131.072-106.624-237.76-237.696-237.76s-237.696 106.624-237.696 237.76h-51.2a289.28 289.28 0 0 1 185.408-269.76 183.488 183.488 0 1 1 287.104-151.552c0 62.848-31.744 118.464-80.064 151.552a289.472 289.472 0 0 1 185.408 269.76zM512 349.824c-73.024 0-132.352 59.392-132.352 132.352S439.04 614.528 512 614.528s132.416-59.392 132.416-132.352A132.48 132.48 0 0 0 512 349.824z"></path>
      </svg>
      <span>{user.name}</span>
    </div>
  ) : null;
};

export default UserProfile;
